<template>
  <div class="app-container" v-loading="loading" v-table-height="{callback: height => minHeight = height}" :style="{height: minHeight + 'px'}">
    <el-form size="small" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="160px" label-position="left">
      <el-form-item label="系统名称：" prop="bossName">
        <el-input
          type="text"
          v-model="ruleForm.bossName"
          placeholder="系统名称"
          style="width:200px"
          auto-complete="new-password"
        />
      </el-form-item>

<!--      <el-form-item label="服务商系统名称：" prop="logiName">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="ruleForm.logiName"-->
<!--          placeholder="系统名称"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->

      <el-form-item label="logo：" prop="logo">
        <imageUpload ref="upload" :limit="1" :fileSize="10" v-model="ruleForm.logo" :fileList="ruleForm.logo"/>
      </el-form-item>

      <el-form-item label="PC登录页面背景名称：" prop="pcLoginBackgroundName">
        <el-input
          type="text"
          v-model="ruleForm.pcLoginBackgroundName"
          placeholder="PC登录页面背景名称"
          style="width:200px"
          auto-complete="new-password"
        />
      </el-form-item>


      <el-form-item label="PC登录页面背景图：" prop="logiPc">
        <imageUpload ref="upload" :limit="1" :fileSize="10" v-model="ruleForm.logiPc" :fileList="ruleForm.logiPc"/>
      </el-form-item>

      <el-form-item label="移动登录页面背景名称：" prop="mobileLoginBackgroundName">
        <el-input
          type="text"
          v-model="ruleForm.mobileLoginBackgroundName"
          placeholder="移动登录页面背景名称"
          style="width:200px"
          auto-complete="new-password"
        />
      </el-form-item>

      <el-form-item label="移动登录页面背景图：" prop="logo">
        <imageUpload ref="upload" :limit="1" :fileSize="10" v-model="ruleForm.logiMobile" :fileList="ruleForm.logiMobile"/>
      </el-form-item>
<!--      <el-form-item label="备案号：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="备案号"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="CDN地址：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="CDN地址"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="版本号：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="版本号"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="时区：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="时区"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="语言：">-->
<!--        <el-select style="width:200px" v-model="registerForm.language" placeholder="请选择">-->
<!--          <el-option-->
<!--            label="简体中文"-->
<!--            value="ZH">-->
<!--          </el-option>-->
<!--      </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="禁用IP：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="禁用IP"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="客服电话：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="客服电话"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="后台固定页：">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="registerForm.systemName"-->
<!--          placeholder="后台固定页"-->
<!--          style="width:200px"-->
<!--          auto-complete="new-password"-->
<!--        />-->
<!--      </el-form-item>-->
      <div class="pl100">
        <el-form-item label="" label-width="0">
          <el-button
            type="primary"
            style="width:100px;"
            @click.native.prevent="handleRegister"
          >
            <span>保存</span>
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import { xitongAdd, xitongDetail, xitongEidt, xitongList } from '@/api/system/xitong'
import { mapMutations } from 'vuex'

export default {
  name: "index",
  components: {
    UploadImage
  },
  data() {
    return {
      ruleForm: {
        bossName: '',
        filingNo: '',
        logo: '',
        logiPc: '',
        logiMobile: '',
        pcLoginBackgroundName:'',
        mobileLoginBackgroundName:''
      },
      rules: {
        bossName: [
          { required: true, message: '请输入运营平台名称', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '请上传logo', trigger: 'change' }
        ],
        pcLoginBackgroundName: [
          { required: true, message: '请上传PC登录页面背景名称', trigger: 'change' }
        ],
        mobileLoginBackgroundName: [
          { required: true, message: '请上传移动登录页面背景名称', trigger: 'change' }
        ],
        logiPc: [
          { required: true, message: '请上传PC端登录背景图', trigger: 'change' }
        ],
        logiMobile: [
          { required: true, message: '请上传移动端登录背景图', trigger: 'change' }
        ]
      },
      loading: false,
      minHeight: 0,

      list: '',
      deptId:localStorage.getItem('deptId')?localStorage.getItem('deptId'):''
    };
  },
  watch: {
    'ruleForm.logo' (a, b) {
      if (a === '') return

      this.$refs.ruleForm.clearValidate(['logo'])
    }
  },
  async created() {
    await this.getList()
  },
  methods: {
    ...mapMutations(['SET_XITONG']),

    // 获取信息列表
    getList() {
      this.loading = true
      xitongList().then(res => {
        if (res.rows.length > 0) {
          this.list = res.rows[0]
          this.ruleForm=res.rows.find(row => row.deptId==this.deptId)||{}
          this.loading = false
          //this.getDetail()
        } else {
          this.loading = false
          this.list = ''
        }
      }).catch(err => {
        this.loading = false
      })
    },

    // 获取详情
    getDetail() {
      xitongDetail({
        id: this.list.id
      }).then(res => {
        this.ruleForm.id = res.data.id
        this.ruleForm.bossName = res.data.bossName
        this.ruleForm.logo = res.data.logo
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },

    handleRegister() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return
        this.loading = true
        const params = this.ruleForm.id ? xitongEidt : xitongAdd
        let item={
          ...this.ruleForm,
          deptId:this.deptId,
        }
        params(item).then(res => {
          this.$message.success('保存成功')
          this.SET_XITONG({
            bossName: res.data.bossName,
            logo: res.data.logo,
            logoUrl: res.data.logoUrl
          })
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
